<template>
  <div>
<!--    <el-row :gutter="20">-->
<!--      <el-col :span="6">-->
<!--        <div style="widows: 100%; height:  300px; background-color: blue"></div>-->
<!--      </el-col>-->
<!--      <el-col :span="6">-->
<!--        <div style="widows: 100%; height:  300px; background-color: red"></div>-->
<!--      </el-col>-->
<!--    </el-row>-->

    <el-row>
      <el-col :span="6">
        <div style=" padding:  10px; border:  1px solid #ccc ;text-align: center">
          <img  src="../assets/logo.png" alt="">
          <div style="text-align: center"> 这是一段很牛bi的描述</div>
          <div style="text-align: center ;color: red"> 价格$99.0</div>
        </div>
       </el-col>
      <el-col :span="6">
        <div style=" padding:  10px; border:  1px solid #ccc;text-align: center">
          <img  src="../assets/logo.png" alt="">
          <div style="text-align: center"> 这是一段很牛bi的描述</div>
          <div style="text-align: center ;color: red"> 价格$99.0</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div style=" padding:  10px; border:  1px solid #ccc;text-align: center">
          <img  src="../assets/logo.png" alt="">
          <div style="text-align: center"> 这是一段很牛bi的描述</div>
          <div style="text-align: center ;color: red"> 价格$99.0</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div style=" padding:  10px; border:  1px solid #ccc;text-align: center">
          <img  src="../assets/logo.png" alt="">
          <div style="text-align: center"> 这是一段很牛bi的描述</div>
          <div style="text-align: center ;color: red"> 价格$99.0</div>
        </div>
      </el-col>


    </el-row>

    <el-row>
      <el-col :span="24">
        <button>按钮</button>

        <el-button>Element独特的按钮</el-button>
        <el-button type="primary">主要的按钮</el-button>
        <el-button type="danger">危险的按钮</el-button>
        <el-button type="warning">警告的按钮</el-button>
        <el-button type="info">信息的按钮</el-button>
        <el-button type="success">成功的按钮</el-button>
        <el-button disabled>默认的按钮</el-button>

        <el-button type="primary" plain>主要的按钮</el-button>

        <el-button type="primary" plain round>主要的按钮</el-button>

        <el-button circle icon="el-icon-edit" type="primary">edit</el-button>
        <el-button circle icon="el-icon-delete" type="danger">delete</el-button>

      </el-col>
    </el-row>

    <el-row>
      <el-col>
        <el-input style="width: 200px" v-model="value" placeholder="请输入内容"></el-input>

        <el-input type="textarea" style="width: 200px" v-model="value1"></el-input>

        <el-input show-password style="width: 200px" v-model="password" placeholder="请输入密码"></el-input>

        <el-input style="width: 200px" v-model="value2" placeholder="请输入内容" prefix-icon="el-icon-search"></el-input>
        <el-input clearable style="width: 200px" v-model="value2" placeholder="请输入内容" suffix-icon="el-icon-user"></el-input>

        <el-button>搜索</el-button>

      </el-col>

    </el-row>

    <el-row style="margin: 20px 0">
      <el-autocomplete style="width: 300px" placeholder="请输入内容，我来帮你猜一猜" :fetch-suggestions="querySearch"
                         :trigger-on-focus="false" v-model="value3"></el-autocomplete>

    </el-row>

    <el-row>
      <el-select v-model="select"  @change="changeSelect">
        <el-option value="香蕉"></el-option>
        <el-option value="菠萝"></el-option>
        <el-option value="橘子"></el-option>

      </el-select>

      <el-select v-model="select"  @change="changeSelect">
        <el-option v-for="item in fruits" :key="item.id" :label="item.name" :value="item.name"></el-option>

      </el-select>

      <el-select v-model="select2"  @change="changeSelectUser" multiple filterable>
        <el-option v-for="item in users" :key="item.card" :label="item.name" :value="item.card"></el-option>

      </el-select>

      <el-select v-model="select2"  @change="changeSelectUser" multiple filterable>
        <el-option v-for="item in users" :key="item.card" :label="item.label" :value="item.card"></el-option>

      </el-select>
    </el-row>

    <el-row>
      <el-radio-group v-model="radio" @change="changeSelectRadio">
        <el-radio label="男"></el-radio>
        <el-radio label="女"></el-radio>
      </el-radio-group>
    </el-row>

    <el-row>
      <el-checkbox-group v-model="selectbox" @change="changeSelectCheck">
        <el-checkbox label="男1"></el-checkbox>
        <el-checkbox label="男2"></el-checkbox>
        <el-checkbox label="女1"></el-checkbox>
      </el-checkbox-group>
    </el-row>

    <el-row>
      <el-date-picker v-model="date" type="date" placeholder="请选择日期"  @change="changeSelectDate"></el-date-picker>
      <el-date-picker v-model="date" type="date" placeholder="请选择日期" value-format="yyyy-MM-dd" @change="changeSelectDate"></el-date-picker>
      <el-date-picker v-model="datetime" type="datetime" placeholder="请选择日期和时间"  value-format="yyyy-MM-dd HH:mm:ss" @change="changeSelectDateTime"></el-date-picker>
      <el-date-picker v-model="daterange" type="daterange"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="changeDateRange"></el-date-picker>

    </el-row>


    <el-row style="margin: 100px 0">
      <el-table :data="tabledate" border :header-cell-style="{background:'aliceblue', fontsize:'16px' }">
        <el-table-column label="序号" prop="id" align="center"> </el-table-column>
        <el-table-column label="名称" prop="name" align="center"> </el-table-column>
        <el-table-column label="年龄" prop="age" align="center"> </el-table-column>
        <el-table-column label="地址" prop="address" align="center"> </el-table-column>
        <el-table-column label="操作" align="center">
          <template v-slot="scope">
            <el-button type="primary" @click="edit(scope.row)">编辑</el-button>
          </template></el-table-column>

      </el-table>



    </el-row>
    <el-row>
      <div style=" padding:  10px; border:  1px solid #ccc">
        <el-link href="https://element.eleme.cn/#/zh-CN/component/installation" target="_blank">ElementUI链接</el-link>
        <el-link type="primary">主要链接</el-link>
        <el-link type="success">成功链接</el-link>
        <el-link type="warning">警告链接</el-link>
        <el-link type="danger">危险链接</el-link>
        <el-link type="info">信息链接</el-link>
      </div>
    </el-row>

  </div>

</template>



<script>
export default{
  name:'Element',
  data() {
    return {
      value : '',
      value1: '',
      value2: '',
      value3: '',
      password:'',
      coffees: [{value:'1星巴克咖啡'},{value:'1雀巢咖啡'},{value:'2瑞幸咖啡'},{value:'3库迪咖啡'}],  //值必须带value
      select: '',
      select2: '',
      fruits: [ {name:'苹果', id:1},
        {name:'橘子', id:2},
        {name:'菠萝', id:3},
        {name:'橙子', id:4},
      ],
      users: [
        {name :'压哨1' , card: '1997'},
        {name :'压哨2' , card: '1998'},
        {name :'压哨3' , card: '1999'},
        {name :'压哨4' , card: '2000'},
        {label :'压哨5' , card: '2001'},
        {label :'压哨6' , card: '2002'},
      ],
      radio:'',
      selectbox:[],
      date:'',
      datetime:'',
      daterange:'',
      tabledate: [
        {name :'压哨1' , address: '广西' , id:1, age: '17'},
        {name :'压哨2' , address: '广西a' , id:2 , age: '17'},
        {name :'压哨3' , address: '广西D' , id:3 , age: '17'},
      ],

    }
  },
  methods: {
    querySearch(query,cd){  //call back
      console.log(query)
      let reuslt = query ? this.coffees.filter(v => v.value.includes(query)) : this.coffees
      console.log(reuslt)
      cd(reuslt);
    },
    changeSelect() {
      console.log(this.select)
    },
    changeSelectUser() {
      console.log(this.select2)
    },
    changeSelectRadio() {
      alert(this.radio)
    },
    changeSelectCheck() {
      console.log(this.selectbox)
    },
    changeSelectDate() {
      console.log(this.date)
    },
    changeSelectDateTime() {
      console.log(this.datetime)
    },
    changeDateRange() {
      console.log(this.daterange)
    },
    edit(row) {
      // alert(row.name)
      // this.$message.success(row.name)
      // this.$message.warning(row.name)
      // this.$notify.success(row.name)
      // this.$notify.warning(row.name)
      this.$confirm('这是啥' , '提示', {
        type:'warning'
      }).then(res => {
        this.$message.success("ok 我点了确认")
      }).catch(()=>{
        this.$message.warning("ok 我点了取消")
      })

    }
  }
}


</script>